<template>
	<view class="page">
		<swiper class="swiper" @change="onPageChange">
			<swiper-item>
				<video-page :isShow="pageIndex === 0"></video-page>
			</swiper-item>
			<swiper-item>
				<detail-page :isShow="pageIndex === 1" :foodId="id"></detail-page>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import videoPage from "./videoPage/videoPage.vue";
	import detailPage from "./detailPage/detailPage.vue";
	export default {
		// 解除样式隔离
		options: { styleIsolation: 'shared' },
		components: {
			videoPage,
			detailPage
		},
		data() {
			return {
				id: 0,
				pageIndex: 0,
			};
		},
		methods: {
			// 切换页面
			onPageChange({ detail }) {
				this.pageIndex = detail.current
			},
		},
		onLoad({ id }) {
			this.id = id
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		.swiper {
			height: 100vh;
		}
	}
</style>
